﻿
@{
    ViewData["Title"] = "ApplicationList";
}

@section Scripts
    {
    <link href="~/css/page.css" rel="stylesheet" />
    <script src="~/echats/echarts.js"></script>
    <script type="text/javascript">
        var selfLayer = null, page = 1, active = null;
        layui.use(['layer', 'table', 'laydate', 'treeSelect'], function () {
            var layer = layui.layer //弹层
                ,
                table = layui.table, form = layui.form, treeSelect = layui.treeSelect; //表格
            layui.laydate.render({
                elem: '#vardateTime',
                range: '~'
            })
            //地区
            treeSelect.render({
                // 选择器
                elem: '#varProjectName',
                // 数据
                data: '/User/GetAreaTreeAll?code=' + localStorage.getItem("X-AreCode"),
                // 请求头
                //  headers: { 'Authorization': 'Bearer ' + localStorage.getItem("X-TOKEN") },

                // 异步加载方式：get/post，默认get
                type: 'get',
                // 占位符
                placeholder: '地区',
                // 是否开启搜索功能：true/false，默认false
                search: true,
                // 一些可定制的样式
                style: {
                    folder: {
                        enable: true
                    },
                    line: {
                        enable: true
                    }
                },
                // 点击回调
                click: function (d) {
                    //  console.log(d);
                },
                // 加载完成后的回调函数
                success: function (d) {
                    //  console.log(d);
                    //                选中节点，根据id筛选
                    // treeSelect.checkNode('pidSelect', $("#varProjectName").val());

                    // console.log($('#varProjectName').val());

                    //                获取zTree对象，可以调用zTree方法
                    var treeObj = treeSelect.zTree('varProjectName');
                    // console.log(treeObj);

                    //                刷新树结构
                    treeSelect.refresh('pidSelect');
                }
            });
          
            myEcharts();
            //加载数据
            function myEcharts(unCode) {
                var myChart = echarts.init(document.getElementById("main"));

                axios({
                    method: 'get',
                    url: '/SummaryReport/GetApplicationReport',
                    params: {
                        unCode: unCode
                    },
                    headers: { 'Authorization': 'Bearer ' + localStorage.getItem("X-TOKEN") }
                }).then(function (result) {
                    console.log("789456321");
                    console.log(result.data);
                    if (result.data.code == "200") {
                        myChart.hideLoading();



                      //  result.data = JSON.stringify(result.data);

                        var dataX = [];
                        var dataY = [];
                       // console.log(result.data);
                        var thead = "<tr>";
                        var tbody = "<tr>";
                        for (var j = 0; j < result.data.result.data.length; j++) {
                            dataX.push(result.data.result.data[j].name);
                            dataY.push(result.data.result.data[j].value);

                            thead += "<td>" + result.data.result.data[j].name + "</td>";
                            tbody += "<td><a onclick='oenpage(\"" + result.data.result.data[j].name + "\")'>" + result.data.result.data[j].value + "</a></td>";
                        }

                        thead += "</tr>";
                        tbody += "/<tr>";


                        console.log(dataX);
                        console.log(dataY);
                        option = {
                            title: {
                                text: '标签汇总分析',
                                x: 'center',
                                y: 20,
                            },
                            color: ['#47F4F6', '#FF4DA4', '#A67EFF', '#FFCD57', '#63E3BB', '#D955FF', '#3D98E5', '#FF8CBF', '#1FCFFF', '#FF9149', '#6CFF9B', '#FFE59F', '#2BECFF', '#D17AFF', '#5489FF', '#7EA5FF', '#72FFE1', '#FF7F87', '#34B3FF', '#FF8F7F'],
                            legend: {
                                textStyle: {
                                    fontSize: 16
                                },
                                //x: 'center',
                                //y: -10,
                                //  data: legenddata
                            },
                            tooltip: {
                                trigger: 'axis',
                                textStyle: {//图例文字的样式
                                    fontSize: 16
                                }
                            },
                            toolbox: {
                                x: '85%',
                                y: 20,
                                feature: {
                                    magicType: {
                                        show: true,
                                        type: ['line', 'bar'],
                                        title: { line: '折线图切换', bar: '柱形图切换' },
                                        iconStyle: {
                                            emphasis: {
                                                textPosition: 'top'
                                            }
                                        }
                                    },
                                    saveAsImage: {
                                        show: true, title: '下载', iconStyle: {
                                            emphasis: {
                                                textPosition: 'top'
                                            }
                                        }
                                    }
                                },
                                textStyle: {//图例文字的样式
                                }
                            },
                            xAxis: {
                                name: '类型',
                                axisLabel: {
                                    rotate: 60,
                                    interval: 0

                                },
                                textStyle: {//图例文字的样式
                                    fontSize: 16
                                },

                                data: dataX
                            },
                            yAxis: {
                                type: 'value',
                                name: '',
                                margin: 10,
                                textStyle: {
                                },
                                axisLabel: {
                                    interval: 'auto',
                                    rotate: -15,
                                    margin: 18,
                                    formatter: '{value}'
                                },
                                axisLine: {    // 轴线
                                    show: true,
                                    lineStyle: {
                                        type: 'dashed',
                                        width: 1
                                    }
                                }
                            },
                            series: [
                                {
                                    data: dataY,
                                    type: 'bar'
                                }
                            ]
                        };
                        myChart.clear();
                        myChart.setOption(option);
                        $("#thdata").html(thead);
                        $("#tbdata").html(tbody);
                    }
                }).catch(function (error) {
                    console.log(error);
                });


            };

            var $b = layui.$;
            active = {
                reload: function (page) {
                    //执行重载
                    table.reload('dataList', {
                        page: {
                            curr: page || 1 //重新从第 1 页开始
                        },
                        where: {
                            unCode: $("#varProjectName").val(),
                        }

                    });
                }
            };
            $b('#search').on('click', function () {
                var type = $b(this).data('type');
                active[type] ? active[type].call(this) : '';
            });



        });
    </script>
}

<blockquote class="layui-elem-quote layui-text layui-form">
    <div class="layui-inline">
        <label class="layui-form-label">地区：</label>
        <div class="layui-input-inline">
            <input type="text" id="varProjectName" lay-filter="tree" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <div class="layui-form-label">
            <button class="layui-btn" id="search" style="width: 60px; height: 28px; line-height: 28px; display: inline" data-type="reload">搜索</button>
        </div>
    </div>
</blockquote>

<br />
<div id="main" style="height: 600px; width: 100%; min-width:960px"></div>
<br />

<table class="layui-table" id="dataview" lay-filter="datalist">
    <thead id="thdata"> </thead>
    <tbody id="tbdata"></tbody>
</table>

